<template>
  <el-dropdown :hide-on-click="false" :show-timeout="100" trigger="click">
    <el-button plain>
      Platforms{{ platforms.length }}
      <el-icon class="el-icon--right" style="vertical-align: middle;">
        <CaretBottom />
      </el-icon>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu class="no-border">
        <el-checkbox-group v-model="platforms" style="padding: 5px 15px;">
          <el-checkbox v-for="item in platformsOptions" :key="item.key" :label="item.key">
            {{ item.name }}
          </el-checkbox>
        </el-checkbox-group>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script>
export default {
  name: 'Platform'
}
</script>

<script setup>
import { defineProps, reactive, computed, defineEmits } from 'vue'
import { CaretBottom } from '@element-plus/icons-vue'

const emits = defineEmits(['update:moduleValue'])

const props = defineProps({
  modelValue: {
    required: true,
    default: () => [],
    type: Array
  }
})

const platformsOptions = reactive([
  { key: 'a-platform', name: 'a-platform' },
  { key: 'b-platform', name: 'b-platform' },
  { key: 'c-platform', name: 'c-platform' }
])

const platforms = computed({
  get() {
    return props.modelValue
  },
  set(val) {
    emits('update:moduleValue', val)
  }
})

</script>
